<template>
    <van-form
        class="query-container"
        @submit="onSubmit"
        ref="phonequery"
        @failed="onFailed">
        <van-cell-group
            inset
            :style="{marginTop:'20px'}"
        >
            <phone-field
                v-model="query_state.phone"
                :sendCodeMessage="$st('wp_Send_the_verification_code')"
                @sendVcode="onSendValidatecode"/>
            <van-field
                center
                class="vercode"
                label-class="vercode-class"
                v-model="query_state.vercode"
                type="digit"
                name="vercode"
                :placeholder="$st('wp_Please_enter_verification_code')"
                :rules="[{ required: true, message: $st('wp_Please_enter_verification_code') }]" />
        </van-cell-group>

        <van-button
            class="loginbtn"
            round
            size="normal"
            type="primary"
            native-type="submit"
            @click="clickQueryReport">
            {{$st('wp_Inquire')}}
        </van-button>

        <van-button
            class="switchbtn"
            round
            size="normal"
            v-show="query_state.show_querybyuser"
            @click="clickQueryReportByUser">
            {{$st('wp_Account_One_Key_Query')}}
        </van-button>
    </van-form>
</template>
<script>
import {
    ref
} from 'vue';
import Cookies from 'js-cookie';
import { useRepairOrderQuerySetup, useRepairOrderQueryListSetup } from '@/setup/repair/RepairReortQuerySetup.js';
import PhoneField from '@/components/_common/PhoneField.vue';
export default {
    components: { PhoneField },
    setup () {
        const isCanSendCode = ref(true);
        const vercode_second = ref(0);
        const {
            getVercodeForRepair,
            query_state,
            setQueryCookies
        } = useRepairOrderQuerySetup();
        const { getRepairDataByPhone, getRepairDataByUserPhone } = useRepairOrderQueryListSetup();
        return {
            query_state,
            isCanSendCode,
            vercode_second,
            setQueryCookies,
            getVercodeForRepair,
            getRepairDataByPhone,
            getRepairDataByUserPhone
        };
    },
    methods: {
        async clickQueryReport () {
            try {
                await this.$refs.phonequery.validate();
                this.setQueryCookies('phone', this.query_state.phone, this.query_state.vercode);

                const params = {
                    administrator: '',
                    company: '',
                    content: '',
                    manufacturecode: '',
                    n: 20,
                    name: '',
                    p: 1,
                    phone: this.query_state.phone,
                    repairid: '',
                    createtime: '',
                    repairtimeend: '',
                    repairtimestart: '',
                    status: 'all',
                    username: '',
                    vercode: this.query_state.vercode
                };
                console.log(params);
                this.getRepairDataByPhone(params, () => {
                    this.$router.push({
                        path: '/repairorderquerylist'
                    });
                });
            } catch (error) {
                console.log(error);
            }
        },
        clickQueryReportByUser () {
            const username = Cookies.get('username');

            if (username) {
                this.setQueryCookies('userphone');

                const params = {
                    administrator: '',
                    company: '',
                    content: '',
                    manufacturecode: '',
                    n: 20,
                    name: '',
                    p: 1,
                    phone: '',
                    repairid: '',
                    createtime: '',
                    repairtimeend: '',
                    repairtimestart: '',
                    status: 'all',
                    username: '',
                    vercode: ''
                };
                this.getRepairDataByUserPhone(params, () => {
                    this.$router.push({
                        path: '/repairorderquerylist'
                    });
                });
            }
        },
        onSendValidatecode () {
            const param = {
                phone: this.query_state.phone,
                language: 'cn'
            };
            console.log(param);
            this.getVercodeForRepair(param);
        }
    }
};

</script>
<style lang="scss" scoped>
    .query-container {
        text-align: center;
        height: calc(100vh - 65px);

        :deep(.van-field__label){
            width: 52px;
        }
    }

    .phone-input-group {
        margin-top: 20px;
        height: 120px;
    }
    .country-button {
        width: 25px;
        height: 23px;
        border-style: none;
        font-size: 15px;
        font-weight: Normal;
        text-align: LEFT;
        color: #000000;
        margin-left: 10px;
        background-color: white;
    }

    .codebtn {
        color: #1890ff;
        border: 0 solid white;
    }

    .loginbtn {
        margin: 30px auto 0;
        height: 35px;
        display: block;
        width: 180px;
    }

    .switchbtn {
        margin: 15px auto;
        height: 35px;
        width: 180px;
        display: block;
    }
    .vercode{

          height: 60px;
                font-size: 17px;
    }

</style>
<style>
.vercode-class{

      padding-top: 14;
}
</style>
